<template>
  <div class="view-wrap">
    <div class="view-card">
      <generate-form
        v-if="formConf.fields.length && formModel && formType !== 4"
        ref="generateForm"
        :form-conf="formConf"
        :page-form-model="formModel"
        style="margin-bottom: 40px"
      />
      <exam-result
        v-else-if="formConf.fields.length && formModel && formType === 4"
        ref="examFormRef"
        :data-id="formModel['id']"
        :show-dimension-report="!!dimensionConfig"
        style="margin-bottom: 40px"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, provide, ref } from "vue";
import { useRoute } from "vue-router";
import GenerateForm from "@/views/formgen/components/GenerateForm/GenerateForm.vue";
import ExamResult from "@/views/form/exam/ExamResult.vue";
import { getFormDataViewRequest } from "@/api/project/data";
import { FORM_DISABLED_KEY } from "@/views/formgen/components/GenerateForm/types/constants";
import { getDimensionByKey } from "@/api/project/dimension";
import { FormConfigType, getDefaultFormConfig } from "@/views/formgen/components/GenerateForm/types/form";

const route = useRoute();
const generateForm = ref<InstanceType<typeof GenerateForm> | null>(null);
const formModel = ref<Record<string, any>>({});
const form = ref<any>(null);

const formConf = ref<FormConfigType>({
  ...getDefaultFormConfig(),
  disabled: true,
  formBtns: false,
  resetBtn: false
});

provide(FORM_DISABLED_KEY, true);

const formType = computed(() => {
  return form.value?.type;
});

const dimensionConfig = ref<any>();

onMounted(() => {
  const dataId = route.query.dataId as string;
  getFormDataViewRequest(dataId).then(res => {
    formModel.value = res.data.formData;
    form.value = res.data.form;
    formConf.value.fields = res.data.formFields.map((item: any) => item.scheme);
    if (form.value.type === 4) {
      getDimensionByKey(form.value.formKey).then(res => {
        if (res.data) {
          dimensionConfig.value = res.data;
        }
      });
    }
  });
});
</script>

<style lang="scss" scoped>
.generateForm {
  margin: 20px;
}

:deep(.el-form-item__label) {
  text-align: left !important;
}

.view-wrap {
  width: 100%;

  .view-card {
    width: 50%;
    padding: 10px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  .view-card {
    width: 100% !important;
    padding: 0;
  }
}
</style>
